{% extends "base.html" %}

{% block title %}支付订单 - 万岛潜水{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">首页</a></li>
                    <li class="breadcrumb-item"><a href="{{ url_for('main.profile') }}">个人中心</a></li>
                    <li class="breadcrumb-item active" aria-current="page">支付订单</li>
                </ol>
            </nav>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-8">
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h1 class="card-title h3 mb-4">订单支付</h1>
                    
                    {% with messages = get_flashed_messages() %}
                    {% if messages %}
                    <div class="alert alert-danger">
                        {% for message in messages %}
                        {{ message }}
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% endwith %}
                    
                    <div class="card mb-4">
                        <div class="card-header">
                            订单信息
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-4 fw-bold">订单编号：</div>
                                <div class="col-md-8">{{ booking.id }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-4 fw-bold">课程名称：</div>
                                <div class="col-md-8">{{ booking.course.name }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-4 fw-bold">预约日期：</div>
                                <div class="col-md-8">{{ booking.booking_date.strftime('%Y-%m-%d %H:%M') }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-4 fw-bold">教练：</div>
                                <div class="col-md-8">{{ booking.coach.name }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-4 fw-bold">参与人数：</div>
                                <div class="col-md-8">{{ booking.participants }}人</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-4 fw-bold">是否拼团：</div>
                                <div class="col-md-8">{{ '是' if booking.is_group else '否' }}</div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 fw-bold">应付金额：</div>
                                <div class="col-md-8 text-danger fw-bold">¥{{ booking.total_price }}</div>
                            </div>
                        </div>
                    </div>
                    
                    <form id="payment-form" method="post" action="{{ url_for('main.process_payment', booking_id=booking.id) }}" data-booking-id="{{ booking.id }}">
                        <div class="mb-4">
                            <h5>选择支付方式</h5>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="payment_method" id="wechat" value="wechat" checked>
                                <label class="form-check-label" for="wechat">
                                    <i class="fab fa-weixin text-success me-2"></i>微信支付
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="payment_method" id="alipay" value="alipay">
                                <label class="form-check-label" for="alipay">
                                    <i class="fab fa-alipay text-primary me-2"></i>支付宝
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="payment_method" id="bank" value="bank">
                                <label class="form-check-label" for="bank">
                                    <i class="fas fa-university text-dark me-2"></i>银行转账
                                </label>
                            </div>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">确认支付</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title">支付说明</h5>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">请在12小时内完成支付，否则订单将自动取消</li>
                        <li class="list-group-item">支付成功后，我们会发送确认短信和邮件</li>
                        <li class="list-group-item">如需开具发票，请在支付后联系客服</li>
                        <li class="list-group-item">如有支付问题，请联系我们的客服</li>
                    </ul>
                </div>
            </div>
            
            <div class="card shadow-sm">
                <div class="card-body text-center">
                    <h5 class="card-title">微信扫码支付</h5>
                    <img src="{{ url_for('static', filename='img/qrcode.png') }}" class="img-fluid mb-3" alt="微信支付二维码">
                    <p class="card-text text-muted">扫描上方二维码进行支付</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 